<script setup>
import dayjs from 'dayjs'
import { inject, reactive, ref } from 'vue'

const emit = defineEmits(['close'])

const title = ref('某某小区')
const buildingList = ref([])
const curBuilding = ref({})
const floorList = ref([])
const curFloor = ref({})
const baseInfo = ref({})
const detailInfo = ref({})

const onClose = () => {
  emit('close')
}

const resetData = () => {
  floorList.value = []
  curBuilding.value = {}
  curFloor.value = {}
  baseInfo.value = {}
  detailInfo.value = {}
}


const initCellInfo = (id) => {
  resetData()
  const data = [
    { title: '小区', },
    { building: '1', floorList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12] },
    { building: '2', floorList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12] },
    { building: '3', floorList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12] },
    { building: '4', floorList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12] },
    { building: '5', floorList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12] },
    { building: '6', floorList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12] },
    { building: '7', floorList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12] },
  ]
  buildingList.value = data.map((item) => {
    return {
      title: item.building,
      floorList: item.floorList,
    }
  })
  curBuilding.value = buildingList.value[0]
}

const onChangeBuilding = (item) => {
  curBuilding.value = item
  floorList.value = item.floorList
}

defineExpose({
  initCellInfo,
})
</script>

<template>
  <div class="alarm-event">
    <div class="alarm-event-content">
      <div class="content-header">
        <span class="title">{{ title }}</span>
        <div class="close" @click="onClose"></div>
      </div>

      <div class="content-main">
        <div class="menu-wrap">
          <el-scrollbar max-height="400px">
            <div class="level-building">
              <div class="building-item" :class="{ on: curBuilding?.building == item.building }" v-for="(item, i) in buildingList" :key="i" @click="onChangeBuilding(item)">
                <div class="building-item-title">
                  {{ item.building }}栋
                </div>
              </div>
            </div>
          </el-scrollbar>
          <el-scrollbar max-height="400px">
            <div class="level-floor">
              <div class="floor-item" :class="{ on: curFloor?.floor == item.floor }" v-for="(item, i) in floorList" :key="i" @click="onChangeFloor(item)">
                <div class="floor-item-title">
                  {{ item.floor }}层
                </div>
              </div>
            </div>
          </el-scrollbar>
        </div>
        <div class="info-wrap">
          <el-scrollbar max-height="400px">
            <div class="base-info">
              <div class="info-item" v-for="(item, i) in Object.entries(baseInfo)" :key="i"> 
                <div class="info-item-title">{{ item[0] }}</div>：
                <div class="info-item-value">{{ item[1] }}</div>
              </div>
            </div>
            <div class="detail-info">
              <div class="info-item" v-for="(item, i) in Object.entries(detailInfo)" :key="i"> 
                <div class="info-item-title">{{ item[0] }}</div>：
                <div class="info-item-value">{{ item[1] }}</div>
              </div>
            </div>
          </el-scrollbar>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss" src="@/assets/styles/common.scss"></style>
<style scoped lang="scss">
.alarm-event {
  z-index: 3333;
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: rgba($color: #000000, $alpha: 0.35);
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: auto;

  &-content {
    width: 970px;
    height: 650px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url('@/assets/imgs/dispatch_bg.png');
    position: relative;

    .content-header {
      position: absolute;
      left: 25px;
      top: 38px;
      right: 30px;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .title {
        padding: 0 4px;
        font-size: 20px;
        font-weight: 400;
        font-family: YouSheBiaoTiHei;
        background: linear-gradient(0deg, #8dc4ff 0%, #ffffff 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }

      .close {
        width: 16px;
        height: 16px;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-image: url('@/assets/imgs/ic_gb_dialog.png');
        cursor: pointer;
      }
    }

    .content-main {
      width: 100%;
      height: 100%;
      padding: 90px 30px 40px;
      display: flex;
      flex-direction: column;

      .menu-wrap {
        flex: 0 0 300px;
        display: flex;
      }
      .info-wrap {
        .base-info,
        .detail-info {
          display: flex;
          flex-wrap: wrap;
          .info-item {
            flex: 0 0 50%;
            font-size: 14px;
            .info-item-title {
              color: #aaa;
              white-space: nowrap;
              min-width: 4em;
            }
            .info-item-value {
              color: #ffffff;
            }
          }
        }
      }

    }
  }
}
</style>
